<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link rel="stylesheet" href="../css/bootstrap.css">-->
    <!--<link rel="stylesheet" href="../css/bootstrapValidator.min.css">-->
    <!--<link rel="stylesheet" href="../css/bootstrap-select.css">-->
    <!--<link rel="stylesheet" href="../css/myCommon.css">-->

    <!--<script src="../js/jquery-3.3.1.min.js"></script>-->
    <!--<script src="../js/bootstrap.js"></script>-->
    <!--<script src="../js/bootstrapValidator.min.js"></script>-->
    <!--<script src="../js/bootstrap-select.js"></script>-->
    <!--<script src="../js/i18n/defaults-zh_CN.js"></script>-->

    <title>修改密码</title>



</head>
<body>


<div class="container-fluid panel-body" style="padding-bottom:0px">
    <form class="form-horizontal validation-form" id="formAdd" th:action="@{/user/changePassword}" method="post">
        <div class="panel panel-default" style="margin-bottom: 0px">
            <h4 class="panel panel-heading h4font" >
                修改密码<small>（＊星号是必填项）</small>
            </h4>

            <div class="panel-body">
                <h4><span name="result" style="color: red"></span></h4>
                <div class="form-group">
                    <label class="col-sm-1 control-label"><span style="color: red;font-weight: bold">＊</span>当前密码</label>
                    <div class="col-sm-4">
                        <input type="password" class="form-control" name="password" placeholder=""
                               th:value="${password}">
                    </div>
                    <label class="control-label">（输入当前用户密码）</label>
                </div>

                <div class="form-group">
                    <label class="col-sm-1 control-label"><span style="color: red;font-weight: bold">＊</span>新密码</label>
                    <div class="col-sm-4">
                        <input type="password" class="form-control" name="newPassword" placeholder=""
                               th:value="${newPassword}">
                    </div>
                    <label class="control-label">（密码长度至少6位）</label>
                </div>

                <div class="form-group">
                    <label class="col-sm-1 control-label"><span style="color: red;font-weight: bold">＊</span>确认密码</label>
                    <div class="col-sm-4">
                        <input type="password" class="form-control" name="newPassword2" placeholder=""
                               th:value="${newPassword2}">
                    </div>
                    <label class="control-label">（确认新密码）</label>
                </div>



            </div>
        </div>

        <br/>

        <div class="form-group">
            <div class="col-sm-offset-5 col-sm-1">
                <button type="submit" class="btn btn-primary">保 存</button>
            </div>

            <div class="col-sm-1">
                <button name="backToList" type="button" class="btn btn-primary">返 回</button>
            </div>
        </div>


    </form>

</div>




<script th:inline="javascript">

    $(function () {
        $('button[name="backToList"]').click(function (e) {

            var url="/html/welcome.html";

            $('#container').load(url);

        });

        var $frm =  $('form[id="formAdd"]');
        $frm.ajaxForm(function (data) {
            console.log(data);
            $('span[name="result"]').html(data.result);
            if(data.success)
            {
                alert(data.result);
                window.location.replace(data.url);
            }
            else
            {
                alert(data.result);
            }
        });


        $frm.bootstrapValidator({
            message: '这是无效输入值',
            feedbackIcons: {/*输入框不同状态，显示图片的样式*/
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields:{
                newPassword: {/*键名username和input name值对应*/
                    message: 'password is not valid',
//                    threshold :  6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '密码不能为空'
                        },
                        stringLength: {/*长度提示*/
                            min: 6,
                            max: 30,
                            message: '密码长度必须在6到30之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: '密码只能由由数字字母下划线和.组成'
                        }
                    }
                },
                newPassword2:{
                    message:'password is not valid',
                    validators:{
                        notEmpty:{message: '密码不能为空'},
                        identical:{
                            field:'newPassword',
                            message:'两次密码输入不一致'
                        }
                    }
                },
                password:{
                    validators:{
                        notEmpty:{message: '密码不能为空'},
                        remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                            url: '/user/toCheckPwd',//验证地址
                            message: '密码不正确',//提示消息
                            delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                            type: 'POST'//请求方式
                        }
                    }
                }

            }
        });

        //bootstrapValidator导致表单ajax提交出现两次提交Bug解决
        $("form.validation-form").each(function() {
            var $form = $(this);
            $form.bootstrapValidator().on('success.form.bv', function(e) {
                // 阻止默认事件提交
                console.log("success.form.bv阻止默认事件提交");
                e.preventDefault();
            });
        });

    })
</script>

</body>
</html>